<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>时间戳自动转换</title>
    
        
    <!-- Site CSS -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!--<link href="http://static.bootcss.com/www/assets/css/site.min.css?v5" rel="stylesheet">-->
    
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="/assets/js/html5shiv.min.js?v=1f65f1e951"></script>
      <script src="/assets/js/respond.min.js?v=1f65f1e951"></script>
    <![endif]-->
    
</head>
<body>
 <div class="container">
       <h2>汉字自动转拼音</h2>
   
    <div class="row">
        <div class="col-sm-12">
            <textarea id="text" class="form-control" rows="10"></textarea>
        </div>
    </div>
    
    <div class="row">
        <div class="col-sm-12">
           <button id="btn" class="btn btn-primary"  >转</button>
        </div>
    </div>
    
       <div class="row">
        <div class="col-sm-12">
             <textarea id="show" class="form-control" rows="10"></textarea>
        </div>
    </div>
   
   <hr>
  
   
 </div>

   
       <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="http://cdn.zhuogg.com/pinyin/pinyin.js"></script>
   <script type="text/JavaScript">
        String.prototype.convertPinyin = function (){
            
           return this.replace(/[\u4E00-\u9FA5]+/ig,function(word){
              return toPinyin(word);
            });
            
            
            
        };
    
   
   
       var $text =$('#text');
        var $show =$('#show');
        var handler=function(){
           
            $show.val($text.val().convertPinyin());
            
            
        };
        $text.change(handler);
        $('#btn').click(handler);
        
       
       
       
   </script>
</body>

</html>